<template>
  <div class="w-full h-full">
    <PageHeader :title="t('settlementAccount.title')" />
    <div class="mt12 toolbar flex_aic_jcsb" v-my-point="'tenantAccount:add'">
      <div class="addBtn flex_aic_jcc" @click="handleWithdraw">
        <SvgIcon name="iconziyuan23" color="rgb(255, 89, 8)" class="mr8" />
        <span>{{ t('settlementAccount.add') }}</span>
      </div>
    </div>
    <el-table
      :data="tableData"
      border
      class="mt12 cover-table"
      v-loading="loading"
    >
      <el-table-column type="index" :label="t('settlementAccount.serial')" width="80" />
      <el-table-column prop="bankAccountName" :label="t('settlementAccount.bankAccountName')" />
      <el-table-column prop="bankAccountNo" :label="t('settlementAccount.bankAccountNo')" />
      <el-table-column prop="bankName" :label="t('settlementAccount.bankName')" />
      <el-table-column prop="bankAddress" :label="t('settlementAccount.bankAddress')" />
      <el-table-column prop="flag" :label="t('settlementAccount.defaultAccount')">
        <template #default="scope">
          <el-switch
            v-model="scope.row.flag"
            :active-value="1"
            :inactive-value="0"
            @change="handleSetDefault(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column :label="t('settlementAccount.operation')" width="180">
        <template #default="scope">
          <div class="flex_aic_jcc">
            <div class="operationBtn">
              <el-button type="text" @click="handleEdit(scope.row)" v-my-point="'tenantAccount:edit'"
                >{{ t('settlementAccount.edit') }}</el-button
              >
            </div>
            <el-popconfirm
              :title="t('settlementAccount.deleteConfirm')"
              @confirm="handleDelete(scope.row)"
              :confirm-button-text="t('settlementAccount.confirm')"
              :cancel-button-text="t('settlementAccount.cancel')"
              width="300px"
            >
              <template #reference>
                <el-button class="ml0" type="text" size="small" v-my-point="'tenantAccount:del'">{{ t('settlementAccount.delete') }}</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <editDia v-model="showEditDia" :data="editRow" @success="getDataList" />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import editDia from "./editDia.vue";
import Api from "@/config/api/api";
import { ElMessage } from "element-plus";

const { t } = useI18n();

const showEditDia = ref(false);
const editRow = ref(null);
const tableData = ref([]);
const loading = ref(false);

const handleWithdraw = () => {
  showEditDia.value = true;
  editRow.value = null;
};

const handleEdit = (row) => {
  editRow.value = row;
  showEditDia.value = true;
};

const handleDelete = async (row) => {
  const res = await Api.tenantAccount_delete([row.id]);
  if (res.status == 200) {
    ElMessage.success(t('settlementAccount.deleteSuccess'));
    getDataList();
  }
};

const handleSetDefault = async (row) => {
  const res = await Api.tenantAccount_setDefault(row.id);
  if (res.status == 200) {
    ElMessage.success(t('settlementAccount.setDefaultSuccess'));
    getDataList();
  }
};

const getDataList = async () => {
  loading.value = true;
  const res = await Api.tenantAccount_list({
    page: 0,
    pageSize: 9999,
  });
  tableData.value = res.data?.content || [];
  loading.value = false;
};

onMounted(() => {
  getDataList();
});
</script>

<style lang="scss" scoped>
.addBtn {
  height: 28px;
  margin-left: 10px;
  padding: 0 7px;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}
</style>
